<template>
  <view class="container">
    <nav-bar title="修改密码" :showBack="true"></nav-bar>
    
    <view class="content">
      <!-- 原密码 -->
      <view class="form-item">
        <text class="label">原密码</text>
        <input type="password" v-model="form.oldPassword" placeholder="请输入原密码" />
      </view>
      
      <!-- 新密码 -->
      <view class="form-item">
        <text class="label">新密码</text>
        <input type="password" v-model="form.newPassword" placeholder="请输入新密码" @input="checkPasswordStrength" />
        <view class="password-strength" v-if="form.newPassword">
          <text>密码强度：</text>
          <text :class="['strength-level', strengthLevel]">{{strengthText}}</text>
        </view>
      </view>
      
      <!-- 确认新密码 -->
      <view class="form-item">
        <text class="label">确认新密码</text>
        <input type="password" v-model="form.confirmPassword" placeholder="请再次输入新密码" />
      </view>
      
      <!-- 确认修改按钮 -->
      <view class="confirm-btn" @click="handleConfirm">
        <text>确认修改</text>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/index.vue'

export default {
    components: {
        NavBar
    },
  data() {
    return {
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      strengthLevel: '',
      strengthText: ''
    }
  },
  methods: {
    checkPasswordStrength() {
      const password = this.form.newPassword
      if (!password) {
        this.strengthLevel = ''
        this.strengthText = ''
        return
      }
      
      let score = 0
      // 长度检查
      if (password.length >= 8) score += 1
      // 包含数字
      if (/\d/.test(password)) score += 1
      // 包含小写字母
      if (/[a-z]/.test(password)) score += 1
      // 包含大写字母
      if (/[A-Z]/.test(password)) score += 1
      // 包含特殊字符
      if (/[!@#$%^&*]/.test(password)) score += 1
      
      switch(score) {
        case 0:
        case 1:
          this.strengthLevel = 'weak'
          this.strengthText = '弱'
          break
        case 2:
        case 3:
          this.strengthLevel = 'medium'
          this.strengthText = '中'
          break
        default:
          this.strengthLevel = 'strong'
          this.strengthText = '强'
      }
    },
    validateForm() {
      if (!this.form.oldPassword) {
        uni.showToast({
          title: '请输入原密码',
          icon: 'none'
        })
        return false
      }
      if (!this.form.newPassword) {
        uni.showToast({
          title: '请输入新密码',
          icon: 'none'
        })
        return false
      }
      if (this.form.newPassword.length < 8) {
        uni.showToast({
          title: '新密码长度不能少于8位',
          icon: 'none'
        })
        return false
      }
      if (this.form.newPassword === this.form.oldPassword) {
        uni.showToast({
          title: '新密码不能与原密码相同',
          icon: 'none'
        })
        return false
      }
      if (this.form.newPassword !== this.form.confirmPassword) {
        uni.showToast({
          title: '两次输入的新密码不一致',
          icon: 'none'
        })
        return false
      }
      return true
    },
    handleConfirm() {
      if (!this.validateForm()) return
      
      // TODO: 调用修改密码API
      uni.showLoading({
        title: '修改中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '密码修改成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20px;
}

.form-item {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  
  .label {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    display: block;
  }
  
  input {
    width: 100%;
    height: 40px;
    font-size: 14px;
    color: #333;
  }
  
  .password-strength {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
    
    .strength-level {
      &.weak {
        color: #ff4d4f;
      }
      &.medium {
        color: #faad14;
      }
      &.strong {
        color: #52c41a;
      }
    }
  }
}

.confirm-btn {
  background-color: #1890ff;
  height: 44px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  
  text {
    color: #fff;
    font-size: 16px;
  }
}
</style>